Haz un feedback original usando el efecto love pero con tu logo
Haz un feedback original usando el efecto love pero con tu logo
Code #
<style type="text/css" charset="utf-8">
[id='toggle-heart'] {
display: inline-block;
position: absolute;
left: -100vw;
}
[id='toggle-heart']:checked + label {
color: #e2264d;
filter: none;
will-change: font-size;
-webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
[id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after {
-webkit-animation: inherit;
animation: inherit;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
[id='toggle-heart']:checked + label:before {
will-change: transform, border-width, border-color;
-webkit-animation-name: bubble;
animation-name: bubble;
}
[id='toggle-heart']:checked + label:after {
will-change: opacity, box-shadow;
-webkit-animation-name: sparkles;
animation-name: sparkles;
}
[id='toggle-heart']:focus + label {
text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white;
}
[for='toggle-heart'] {
align-self: center;
position: relative;
color: #888;
font-size: 1em;
filter: grayscale(1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
[for='toggle-heart']:before, [for='toggle-heart']:after {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
border-radius: 50%;
content: '';
}
[for='toggle-heart']:before {
box-sizing: border-box;
margin: -2.25rem;
border: solid 2.25rem #e2264d;
width: 4.5rem;
height: 4.5rem;
transform: scale(0);
}
[for='toggle-heart']:after {
margin: -0.1875rem;
width: 0.375rem;
height: 0.375rem;
box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}
@-webkit-keyframes heart {
0%, 17.5% {
font-size: 0;
}
}
@keyframes heart {
0%, 17.5% {
font-size: 0;
}
}
@-webkit-keyframes bubble {
15% {
transform: scale(1);
border-color: #cc8ef5;
border-width: 2.25rem;
}
30%, 100% {
transform: scale(1);
border-color: #cc8ef5;
border-width: 0;
}
}
@keyframes bubble {
15% {
transform: scale(1);
border-color: #cc8ef5;
border-width: 2.25rem;
}
30%, 100% {
transform: scale(1);
border-color: #cc8ef5;
border-width: 0;
}
}
@-webkit-keyframes sparkles {
0%, 20% {
opacity: 0;
}
25% {
opacity: 1;
box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
}
}
@keyframes sparkles {
0%, 20% {
opacity: 0;
}
25% {
opacity: 1;
box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
}
}
</style><input id="toggle-heart" type="checkbox" /><label for="toggle-heart" aria-label="like"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="50px" height="50px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 304.78 304.78" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="currentColor" d="M94.61 233.57c-2.71,-0.11 -25.12,12.5 -25.75,14.16 -0.7,1.82 0.14,3.47 1.72,3.87 2.16,0.54 12.8,-6.14 15.31,-7.52 10.21,-5.63 13.04,-6.24 8.72,-10.51z"/>
<path fill="currentColor" d="M148.49 2.67l9.48 -0.8 -0.09 109.31c-3.6,-1.39 -6.83,-1.54 -9.52,0.12l0.13 -108.63z"/>
<path fill="currentColor" d="M119.19 226.7c30.19,28.31 68.08,5.92 70.95,-1.5l-17.7 0.08c-3.19,0.16 -5.29,0.04 -8.65,0.19 -10.49,0.46 -25.89,-0.05 -35.88,0.46 -3.24,0.16 -7.51,-0.25 -8.72,0.77z"/>
<path fill="currentColor" d="M160.29 271.95c-6.09,-0.89 -4.55,5.26 -4.64,15.31 -0.1,12 -1.76,16.53 4.58,15.5 2.15,-3.23 1.26,-10.64 1.31,-15.45 0.04,-5.18 0.9,-12.61 -1.25,-15.36z"/>
<path fill="currentColor" d="M201.38 279.05c0.84,1.51 7.11,16.14 10.38,9.36 1.17,-2.43 -5.63,-12.7 -7.11,-15.35 -5.51,-9.82 -5.81,-12.7 -10.63,-10.06 -0.59,3.47 1.53,6.02 3.09,8.64 1.47,2.47 2.92,4.97 4.27,7.41z"/>
<path fill="currentColor" d="M249.29 249.75c-0.46,-2.19 -11.8,-7.98 -14.15,-9.42 -2.09,-1.27 -9.23,-6.36 -11.58,-5.57 -1.18,0.39 -2.25,1.67 -1.92,3.52 0.3,1.7 11.17,7.41 14.13,9.16 2.14,1.28 15.2,10.43 13.52,2.31z"/>
<path fill="currentColor" d="M123.18 266.39c2.11,-3.88 -1.59,-6.93 -4.41,-4.03l-12.9 21.73c-2.29,4.39 2.06,6.48 4.41,3.91l8.81 -14.66c1.44,-2.28 2.91,-4.77 4.09,-6.95z"/>
<path fill="currentColor" d="M126.32 150.61c13.36,-1.67 11.33,-2.61 27.12,-2.81 10.15,-0.13 17.35,1.17 26.94,2.03 -0.09,-11.68 -0.23,-17.59 -6.28,-25.27 -3.8,-4.82 -11.69,-9.8 -21.12,-9.69 -9.54,0.12 -16.68,4.86 -20.94,10.19 -5.57,6.95 -5.98,14.31 -5.72,25.55z"/>
<path fill="currentColor" d="M128.41 153.7c-0.86,2.47 -3.99,2.35 -10.68,7.86 -6.83,5.62 -12.72,12.28 -17.78,19.77 -6.77,10.04 -16.56,31.54 -17.36,41.21 4.82,0.86 12.82,-0.24 18.24,-0.06 3.06,0.1 5.99,-0.22 9.07,-0.11l108.38 -1.88c2.83,0.11 5.69,-0.06 8.42,-0.29 -7.11,-24.62 -19.41,-50.25 -48.16,-66.55 -0.17,-0.2 -0.29,-0.48 -0.38,-0.83 -18.47,-2.04 -31.34,-2.01 -49.75,0.88z"/>
</svg>
</label>
</div>View on Instagram View on Flickr View on Twitter